<template>
    <div>
        <div class="liuyan">
           <div class="title">
            <span> 主题交流</span>    <router-link to="/theme"><span class="more">查看更多</span> </router-link>     
            </div>
            <div>
              <vue-seamless-scroll :data="infos" :class-option="classOption" class="seamless-warp">
            <ul>
                <li class="com" v-for="(info,index) in infos" :key="index">
                    <p> {{info.t_name}}</p>
                    <p>{{info.t_content}}</p>        
                </li>
            </ul>
            </vue-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data(){
        return{
            infos:[],

        }
    },
    mounted(){
      this.$axios
        .get("/themeList.do")
        .then((response) => {
          this.infos = response.data;
          console.log(this.infos);
        })
        .catch(function (error) {
          console.log(error);
        });
    }
}
</script>

<style>

.liuyan{
    background-color: #f08d7c;
    height: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 90px;
}
.liuyan>div:nth-child(2){
  padding-bottom: 10px;
}
.com{
    list-style: none;
    border-bottom: 1px solid rgb(65, 61, 61);
    padding: 0;
    margin: 0;
    margin-top: 10px;
    width: 95%;
    text-align-last: left;
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
}
.com>p:nth-child(1){
  font-size: 15px;
  color: rgb(109, 54, 46);
  margin-left: 10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.com>p:nth-child(2){
  font-size: 13px;
  color: rgb(29, 34, 29);
  margin-left: 10px;
      white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.title{
  font-size: 25px;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 900;
  margin-top: 5px;
  border-bottom: 1px solid rgb(255, 253, 253);
}
.seamless-warp {
    overflow: hidden;
}
.myliuyan{
    width: 400px;
    height: 100px    ;
}
.more{
  text-align: right;
  font-size: 14px;
  margin-left: 120px;
  color: rgb(101, 93, 93);
}
</style>